<template>
	<view class="sure-order">
		<view class="row-1" @click="handleAddress">
			<view class="address">
				<view class="tips" v-if="pageData.address.isDefault">默认</view>
				<text>{{pageData.address.location}}</text>
			</view>
			<view class="details">
				<view class="text">{{pageData.address.detailedAddress}}</view>
				<!-- <text>图标</text> -->
				<view class="" style="margin-top: 10rpx;">
					<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
				</view>
			</view>
			<view class="name">
				<text>{{pageData.address.receiver}}</text>
				<text style="margin-left: 24rpx;">{{pageData.address.phone}}</text>
			</view>
		</view>

		<view class="row-2">
			<view class="list">
				<view class="list-item" v-for="(item,index) in pageData.list" :key="index">
					<sure-order-list res="sure-order-list" :item="item"></sure-order-list>
				</view>
			</view>
		</view>

		<view class="row-3">
			<view class="cell">
				<view class="label">商品总额</view>
				<view class="value">￥{{shoppingPrice}}</view>
			</view>
			<view class="cell">
				<view class="label">运费</view>
				<view class="value">￥{{yunPrice}}</view>
			</view>
			<view class="cell" @click="handleSelectorCoupon">
				<view class="label">优惠券抵扣</view>
				<view class="value">￥{{couponPrice}}</view>
			</view>
		</view>

		<view class="row-4">
			<view class="cell">
				<view class="label">备注</view>
				<input type="text" class="input" v-model="val" placeholder="50字以内（选填）">
			</view>
		</view>

		<!-- 购买 -->
		<view class="row-5">
			<view class="box">
				<view class="price">
					<text style="font-size:30rpx; margin-bottom: 8rpx;">￥</text>
					<text>{{yunPrice + shoppingPrice - couponPrice}}</text>
				</view>
				<view class="btn" @click="handleSubmit">确认下单</view>
			</view>
			<view class="row-5-env"></view>
		</view>
		<!-- 地址 -->
		<view class="row-5">
			<shopping-details-address @click="handleSelectorAdderss" ref="shopping-details-address" />
		</view>
		<!-- 查看商品优惠卷 -->
		<view class="row-6">
			<shopping-details-coupon @getOptions="e=> couponList = e" :shoppingPrice="shoppingPrice" @total="e=> couponPrice = e" :state="2" ref="shopping-details-coupon" />
		</view>
	</view>
</template>
<script>
	import sureOrderList from "../components/sure-order-list.vue";
	import shoppingDetailsAddress from "../components/shopping-details-address.vue";
	import shoppingDetailsCoupon from "../components/shopping-details-coupon.vue";
	import {
		addressList
	} from "@/http";
	import {
		addWcOrderApi
	} from "@/culturalCreativity/http/common.js";
	export default {
		components: {
			sureOrderList,
			shoppingDetailsAddress,
			shoppingDetailsCoupon
		},
		data() {
			return {
				val: "",
				pageData: {},
				userInfo: uni.getStorageSync('userInfo'),
				couponPrice: 0,
				couponList:[], //优惠卷
				listAddressData:[]
			}
		},
		async onShow() {
			this.pageData = uni.getStorageSync('PAGE_DATA');
			let res = await addressList({userPhone: this.userInfo.phone});
			if(!(this.pageData && this.pageData.address && this.pageData.address.id)) return;
			this.listAddressData = res.data.rows;
			this.pageData.address = res.data.rows.reduce((pev,item)=>{
				if(item.id == this.pageData.address.id) pev = item;
				return pev;
			},{})
		},
		methods: {
			async handleSubmit() {
				try {
					if(!(this.pageData.address&&this.pageData.address.id)){
						this.$refs['shopping-details-address'].init();
						return console.log("请选择地址")
					}
					if(['香港','澳门','台湾'].some(item=> this.pageData.address.location.indexOf(item) != -1)){
						return uni.showToast({
							title:"暂不支持港澳台配送",
							icon:"none"
						});
					};
					let data = {
						actualPayment: this.yunPrice + this.shoppingPrice - this.couponPrice, //实付金额  直减：总金额 + 运费 - 优惠卷。  
						totalPrice: this.shoppingPrice, //总金额
						freight:this.yunPrice, //运费
						recipientAddress: this.pageData.address.detailedAddress,
						recipientCity:this.pageData.address.location.split(" ")[0],
						recipientCounty:this.pageData.address.location.split(" ")[1],
						recipientProvince:this.pageData.address.location.split(" ")[2],
						recipientName:this.pageData.address.receiver,
						recipientPhone: this.pageData.address.userPhone,
						// buyerId: uni.getStorageSync('openid'), //买家id
						buyerPhone: this.pageData.address.userPhone, //买家手机号
						buyerRemark: this.val, //买家备注
						wcShoppingCartList: this.pageData.list.map(item => {
							return {
								// buyerId: uni.getStorageSync('openid'), //买家id
								mealCardPay: item.mealCardPay, 
								buyerPhone: this.pageData.address.userPhone, //买家手机号
								specificationId: item.specificationId,
								goodsPic:item.goodsPic,
								specificationName: item.specificationName,
								goodsName: item.goodsName,
								goodsId: item.goodsId,
								num: item.num,
								id:item.id
							}
						}),
						couponId:this.couponList.map(item=>item.id).toString(),
						couponName:this.couponList.map(item=>item.couponName).toString(),
						couponPrice:this.couponList.reduce((pev,item)=>{
							pev = pev + Number(item.couponValue);
							return pev;
						},0)
					};
					let res = await addWcOrderApi(data);
					uni.setStorageSync("msg_data",{
						totalAmount:this.yunPrice + this.shoppingPrice - this.couponPrice,
						orderId: res.data.data.orderNumber,
						fileName:"culturalCreativity"
					});
					uni.redirectTo({
						url:"/commonPages/pay/index"
					})
				} catch (e) {
					console.error("确认订单提交报错",e);
					//TODO handle the exception
				};
			},
			handleSelectorAdderss(options) {
				this.pageData.address = options
			},
			handleAddress() {
				this.$refs['shopping-details-address'].init(this.pageData.address);
			},
			handleSelectorCoupon(){
				let ids = this.pageData.list.map(item=>item.goodsId).toString();
				this.$refs['shopping-details-coupon'].init(ids,this.couponList);
			},
		},
		computed: {
			shoppingPrice() { //商品价格
				let total = 0;
				if (Array.isArray(this.pageData.list)) {
					total = this.pageData.list.reduce((pev, item) => {
						pev = pev + (item.mealCardPay * item.num)
						return pev
					}, 0)
				}
				return total;
			},
			yunPrice() {
				if (!(this.pageData && this.pageData.address && this.pageData.address.location)) return 0;
				if (this.shoppingPrice >= 99) { //包邮
					return 0
				}

				if (this.pageData.address.location.indexOf('北京') != -1) { //北京内
					return 10
				}
				return 15 //北京外
				// if(this.pageData.address.location.indexOf('新疆') != -1 || this.pageData.address.location.indexOf('西藏') != -1)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.sure-order {
		padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);

		.row-5 {
			position: fixed;
			z-index: 1;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #FFFFFF;
			box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);

			.row-5-env {
				height: env(safe-area-inset-bottom);
			}

			.box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					color: #1F1F1F;
					font-size: 60rpx;
					display: flex;
					align-items: flex-end;
					padding-left: 32rpx;
				}

				.btn {
					width: 260rpx;
					height: 128rpx;
					line-height: 128rpx;
					text-align: center;
					background: #FD8F19;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}

		.row-3,
		.row-4 {
			padding: 32rpx;
			background-color: #FFFFFF;
			margin-top: 24rpx;
			border-radius: 30rpx;

			.cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #1F1F1F;

				&+.cell {
					margin-top: 24rpx;
				}

				.input {
					color: 28rpx;
					width: 500rpx;
					text-align: right;
				}
			}
		}

		.row-2 {
			padding: 32rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 30rpx;

			.list-item+.list-item {
				margin-top: 24rpx;
			}
		}

		.row-1 {
			margin-top: 32rpx;
			border-radius: 30rpx;
			overflow: hidden;
			padding: 32rpx;
			position: relative;
			background-color: #FFFFFF;

			&::after {
				position: absolute;
				content: "";
				bottom: 0;
				left: 0;
				right: 0;
				border-bottom: 6rpx solid;
				border-image: url();
				border-image-width: 6rpx;
				border-image-slice: 3;
				border-image-repeat: stretch;
			}

			.details {
				display: flex;
				justify-content: space-between;
				margin: 24rpx 0;
				font-size: 36rpx;
				font-weight: 600;
				color: #2E2F31;

				.text {
					width: 500rpx;
				}
			}

			.name {
				font-size: 28rpx;
				font-weight: 400;
				color: #2E2F31;
			}

			.address {
				font-size: 28rpx;
				font-weight: 400;
				color: #2E2F31;
				display: flex;
				align-items: center;

				.tips {
					width: 60rpx;
					text-align: center;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					font-size: 24rpx;
					background: #FF3B44;
					color: #FFFFFF;
					border-radius: 8rpx;
					margin-right: 8rpx;
				}
			}
		}

		&::after {
			content: "";
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			background-color: #F7F7F7;
		}
	}
</style>
